/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {
  Form, Input, Radio, Select, Icon,
  Upload, Descriptions, DatePicker,
} from 'antd';
import {connect} from 'dva';
import moment from 'moment'
import request from '@/utils/request';
import ZImg from "react-zmage";
import deleteImg from "@/images/delete.png";
import upload from "@/images/upload.png";
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList:[],
      concentratorPicArr: [],
    };
  }

  componentDidMount() {
  }
  render() {

    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };

    const {getFieldDecorator} = this.props.form;
    // const props = {
    //   listType:'picture-card',
    //   onRemove: (file) => {
    //     this.setState(({ fileList }) => {
    //       const index = fileList.indexOf(file);
    //       const newFileList = fileList.slice();
    //       newFileList.splice(index, 1);
    //       return {
    //         fileList: newFileList,
    //       };
    //     });
    //   },
    //   beforeUpload: (file) => {
    //     this.setState(({ fileList }) => ({
    //       fileList: [...fileList,file],
    //     }));
    //     return false;
    //   },
    //   fileList: this.state.fileList,
    // };
    const that=this
    const props = {
      beforeUpload: (file) => {
        let formData = new FormData();
        formData.append("file", file);
        formData.append("group", 'work_orders_'+this.props.editRecord.id);
        request(`/images`, {
          method: 'POST',
          data: formData
        }).then((response)=> {
          console.log(response);
          if(response.status===200){
            that.state[`concentratorPicArr`].push(response.data.data.path)
            that.setState({
              [`concentratorPicArr`]:that.state[`concentratorPicArr`]
            })

          }
        })
        return false;
      },
      showUploadList:false,
      accept:".png, .jpg, .jpeg"
    };
    return (
      <div>
        <Form>
          <Descriptions  column={4}   className={'blue-descriptions'} title={<div style={{textAlign:'center'}}>完成工单详情</div>} bordered>
            <Descriptions.Item label={<span >是否已处理</span>} span={4}>
              {getFieldDecorator('processed', {
                initialValue: '1',
              })(
               <Select>
                 <Option value={'1'}>已处理</Option>
                 <Option value={'-1'}>未处理</Option>
               </Select>
              )}
            </Descriptions.Item>
            <Descriptions.Item label={<span >是否与用户联系</span>} span={4}>
              {getFieldDecorator('contacted', {
                initialValue: '1',
              })(
                <Select>
                  <Option value={'1'}>已联系</Option>
                  <Option value={'-1'}>未联系</Option>
                </Select>
              )}
            </Descriptions.Item>
            <Descriptions.Item label={<span ><span style={{color:'red',top:'2px',
              position:'relative'}}>* </span>出工时间</span>} span={4}>
              {getFieldDecorator('departure_time', {
                initialValue:  moment()
              })(
                <DatePicker
                  showTime
                  style={{width: '100%'}}
                  allowClear={false}
                  //disabledDate={disabledDate}
                  format="YYYY-MM-DD HH:mm:ss"
                />
              )}
            </Descriptions.Item>
            <Descriptions.Item label={<span ><span style={{color:'red',top:'2px',
              position:'relative'}}>* </span> 处理结果</span>} span={4}>
              {getFieldDecorator('process_result', {
                initialValue: '',
                rules: [{ required: true, message: '请输入处理结果' }],
              })(
                <TextArea  rows={2}  />
              )}
            </Descriptions.Item>
         {/*   <Descriptions.Item label={<span > 处理图片</span>} span={4}>
              {getFieldDecorator('process_files', {
                rules: [{required: true, message: '固件文件不能为空'}],
              })(
                <Upload.Dragger {...props}>
                  <p className="ant-upload-text">点击选择图片</p>
                </Upload.Dragger>
              )}
            </Descriptions.Item>*/}
            <Descriptions.Item label={<span > 处理图片</span>} span={4}>
              {
                [this.state[`concentratorPicArr`].map(function (item2,index2){
                  return <div style={{position:'relative',display:'inline-block'}} key={index2}>
                    <ZImg style={{height:'100px',width:'100px',marginRight:'16px',marginBottom:'16px'}} src={item2} />
                    <img  src={deleteImg} style={{position:'absolute',right:'16px',top:'0',width:'40px',height:'40px',cursor:'pointer'}} onClick={()=>{
                      confirm({
                        title: `确定要删除该照片吗?`,
                        content: '请谨慎操作！',
                        okText: '确定',
                        okType: 'danger',
                        cancelText: '取消',
                        centered: true,
                        maskClosable: true,
                        onOk() {
                          let idx;
                          for (let i = 0; i < that.state[`concentratorPicArr`].length; i++) {
                            console.log(that.state[`concentratorPicArr`][i])
                            if (item2 === that.state[`concentratorPicArr`][i]) {
                              idx = i;
                              console.log(idx)
                              that.state[`concentratorPicArr`].splice(idx, 1)
                              that.setState({
                                [`concentratorPicArr`]: that.state[`concentratorPicArr`]
                              },function(){
                              })
                            }
                          }
                        },
                        onCancel() {
                          console.log('Cancel');
                        },
                      });
                    }} alt=""/>
                  </div>
                })]
              }
              <Upload {...props} >
                <img src={upload}   style={{height:'100px',width:'100px',marginRight:'16px',marginBottom:'16px',cursor:'pointer'}}alt=""/>
              </Upload>
            </Descriptions.Item>
          </Descriptions>
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


